import React, { useEffect } from 'react'
import { getSeller } from '../../store/models/seller'
import { useSelector,useDispatch } from 'react-redux'
import { RootState,AppDispatch } from '../../store/index'
import { NavLink, Outlet } from 'react-router-dom'
import style from './Home.module.scss'
const Home:React.FC = () => {
  const dispatch:AppDispatch = useDispatch()
  const sellerList = useSelector((state:RootState) => state.seller.sellerList)
  // console.log(sellerList)
  useEffect(() => {
    // if(!sellerList) {
      
    // }
    dispatch(getSeller())
  },[])



  return (
    <div className={style.box}>
      <div className={style.head}>
        <div className={style.headContent}>
          <img src={sellerList?.avatar} alt="" />
          <div className={style.content}>
            <h4>{sellerList?.name}</h4>
            <div className={style.con}>
              <p>{sellerList?.description}/</p>
              <p>{sellerList?.deliveryTime}分钟送达</p>
            </div>
            {/* <p>{sellerList.supports[0].description}</p> */}
          </div>
        </div>
        <p className={style.bulletin}>{sellerList?.bulletin}</p>
        <div className={style.background}>
            <img src={sellerList?.avatar} alt="" />
        </div>
      </div>

      <div className={style.route}>
        <NavLink to='/home/goods'>商品</NavLink>
        <NavLink to='/home/comment'>评论</NavLink>
        <NavLink to='/home/seller'>商家</NavLink>
      </div>
      <main>
        <Outlet />
      </main>
    </div>
  )
}

export default Home